<template>
  <div id="app">
    <div class="wrap">
      <div v-for="(items, index) in data" :key="index" class="category">
        <p class="type">{{ getCategoryName(index) }}:</p>
        <ul class="tag">
          <!-- act 类根据 isAllSelected(category) 的返回值（布尔值）来决定是否添加。 -->
          <li
            :class=" { act: isAllSelected(index) }"
            @click="selectAll(index)"
          >
            全部
          </li>
          <li
            :class="{ act: isSelected(index, item) }"
            v-for="item in items"
            @click="toggleSelection(index, item)"
          >
            {{ item }}
          </li>
        </ul>
        <div class="clear"></div>
      </div>
      <div>
        <p class="type" >已选条件：</p>
        <p class="tips" v-if="selectedItemsArray.length === 0">
            暂时没有选择过滤条件
        </p>
        <ul  class="tag">
          <li 
          v-for="(item, index) in selectedItemsArray"
              :key="index"
              @click="removeSelection(item)">{{ item.label }}</li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";

// const radio1 = ref('筛选功能')

// 分类数据
const data = reactive({
  coat: ["针织衫", "毛呢外套", "T恤", "羽绒服", "棉衣"],
  pants: ["牛仔裤", "小脚铅笔裤", "休闲裤", "打底裤"],
  dress: ["连衣裙", "半身裙", "长袖连衣裙", "中长款连衣裙"],
});

// 获取分类名称
const getCategoryName = (index) => {
  switch (index) {
    case "coat":
      return "上装";
    case "pants":
      return "裤装";
    case "dress":
      return "裙装";
    default:
      return "";
  }
};

// 已选条件，每个分类只能选一个
const selectedItems = reactive({});

// 初始化，每个分类默认选中“全部”
// Object.keys(data).forEach((index) => {
//   selectedItems[index] = "全部";
// });

// 判断值是否为空或者选择全部
const isAllSelected = (index) => {
  return !selectedItems[index] || selectedItems[index] === "全部";
};


// 选择全部
const selectAll = (index) => {
  selectedItems[index] = "全部";
};

// 判断某个选项是否被选中
const isSelected = (index, item) => {
  return selectedItems[index] === item;
};

// 切换单个选项的选择状态
const toggleSelection = (index, item) => {
  selectedItems[index] = item;
};


  // 已选条件数组，用于显示
  const selectedItemsArray = computed(() => {
  return Object.keys(selectedItems)
    .filter(
      (index) =>
        selectedItems[index] && selectedItems[index] !== "全部"
    )
    .map((index) => {
      //
      return { index, label: selectedItems[index] };
    });
});

  // 移除已选条件
  const removeSelection = (item) => {
    selectedItems[item.index] = "全部";
  };

console.log("selectedItemsArray",selectedItemsArray);
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  cursor: pointer;
}
.type,
.tag,
.tips {
  float: left;
}
.clear {
  clear: both;
}
.tag li {
  float: left;
  padding: 0px 15px;
  margin-right: 5px;
  color: #003399;
  border-radius: 2px;
}
.tag .act {
  background-color: #ff6600;
  color: #fff;
}
.category {
  margin-bottom: 10px;
}
li:hover {
  color: #f60;
  background-color: #f3edc2;
}
.wrap {
  max-width: 600px;
  margin: 50px auto 0 auto;
}
</style>
